<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11_v-model</title>
</head>

<!-- 
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值

-->

<body>
    <div id="app">
        <input type="text" v-model="message">
        <h3>{{message}}</h3>

        <input type="checkbox" value="篮球" v-model="hobies">篮球
        <input type="checkbox" value="足球" v-model="hobies">足球
        <input type="checkbox" value="羽毛球" v-model="hobies">羽毛球
        <input type="checkbox" value="游泳" v-model="hobies">游泳
        <h3>你的爱好有: {{hobies}}</h3>

        <select name="friuts" id="shuiguo" v-model="friut">
            <option value="banana">香蕉</option>
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
        </select>
        <h3>你喜欢吃的水果有: {{friut}}</h3>

        <select name="friuts" id="shuiguo" v-model="friuts" multiple>
            <option value="banana">香蕉</option>
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
        </select>
        <h3>你喜欢吃的水果有: {{friuts}}</h3>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            message: "hello v-model",
            hobies: [],
            friut: 'apple',
            friuts: []
        }
    })
</script>

</html>